<div ng-controller="AppCtrl" layout="column" ng-cloak>

  <md-content layout-padding>
    <form name="projectForm">

      <md-input-container class="md-block">
        <label>Description</label>
        <input md-maxlength="30" required name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>

      <md-input-container class="md-block">
        <label>Client Name</label>
        <input required name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">This is required.</div>
        </div>
      </md-input-container>

      <md-input-container class="md-block">
        <label>Client Email</label>
        <input required type="email" name="clientEmail" ng-model="project.clientEmail"
               minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" />

        <div ng-messages="projectForm.clientEmail.$error" role="alert">
          <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
            Your email must be between 10 and 100 characters long and look like an e-mail address.
          </div>
        </div>
      </md-input-container>

      <md-input-container class="md-block">
        <label>Hourly Rate (USD)</label>
        <input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
               max="4999" ng-pattern="/^1234$/" />

        <div ng-messages="projectForm.rate.$error" multiple md-auto-hide="false">
          <div ng-message="required">
            You've got to charge something! You can't just <b>give away</b> a Missile Defense
            System.
          </div>

          <div ng-message="min">
            You should charge at least $800 an hour. This job is a big deal... if you mess up,
            everyone dies!
          </div>

          <div ng-message="pattern">
            You should charge exactly $1,234.
          </div>

          <div ng-message="max">
            {{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
            doubt event Bill Clinton could afford that.
          </div>
        </div>
        <p>
          Make sure to include <a href="https://docs.angularjs.org/api/ngMessages" target="_blank">ngMessages</a> module when using ng-message markup.
        </p>
      </md-input-container>
    </form>
  </md-content>

</div>
